<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from "vue";
import JButtons from "@/components/j-buttons/index.vue";
import JLoding from "@/components/j-loding/index.vue";
import JType from "@/components/j-type/index.vue";
import YMenuIpt from "./YMenuIpt.vue";
import NavBtn from "./NavBtn.vue";
import YHR from "./YHR.vue";
import { YTab, Kfig, DownType, lodding } from "./scripts/YTab";
import { useRoute } from "vue-router";
import { useClever } from "@/stores/clever";
import DayChart from "../day-chart/index.vue";
import { useCapital } from "@/stores/capital";
import { BalanceHistory } from "./scripts/ChartConfig";
import { hoverdate } from "@/comm/tooltip";
import XspaceTable from './XspaceTable.vue'
const capital = useCapital();
const clever = useClever().clevers;
// console.log('yzt', clever);
const days = ref([
    {
        label: "W"
    },
    {
        label: "M"
    }
]);
const curDay = ref(days.value[0]);

const onDay = () => {
    setTimeout(() => {
        console.log(curDay.value);
        capital.changeHistoryInterval(curDay.value.label);
    }, 30);
};
watch(
    () => capital.historyAmount,
    (newVal: any, oldVal: any) => {
        console.log("history Amount change");
        Kfig.addBalanceHistory(newVal);
    }
);
watch(() => capital.detail, (newValue, oldValue) => {
    if (capital.detail.capitalInfoId) {
        console.log('初始化chart图表数据########################')
        YTab.initChat()
    }
})
onMounted(() => {
    const route = useRoute().query;
    console.log("route", route);
    if (route.name) {
        Kfig.addBalance = route as any;
    }
    document.getElementById("y_chart")?.addEventListener("click", (ent: any) => {
        // console.log("yzt", hoverdate);
        //@ts-ignore
        const Time = new Date(hoverdate[0].axisValue).getTime();
        capital.changeTransactionsTimestamp(Time);
        capital.loadPosition(Time);
        capital.loadTransaction();
    });
    setTimeout(() => {
        canShow.value = false;
    }, 90);

    window.addEventListener("resize", YTab.resize);
});
onUnmounted(() => {
    window.removeEventListener("resize", YTab.resize);
});

const canShow = ref(true);
</script>

<template>
    <div class="y__tab d-flex" style="position: relative">
        <div class="left">
            <XspaceTable></XspaceTable>
        </div>
        <div class="center-line"></div>
        <div class="right d-flex flex-column ">
            <div class="y_nvaTab d-flex">
                <span class="y_nvaTab_title">{{ $t('message.YTab.b') }}</span>
                <JButtons :list="days" v-model="curDay" @change="onDay"></JButtons>
            </div>
            <div class="chart-box">
                <JLoding v-if="lodding"></JLoding>
                <div id="y_chart"></div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.y__tab {
    width: 100%;
    height: 100%;

    .left {
        width: 50%;
        border-radius: 4px;
        height: 100%;
        flex: 1;
        background-color: var(--card);
    }

    .center-line {
        width: var(--space);
    }

    .right {
        width: 50%;
        border-radius: 4px;
        height: 100%;
        flex: 1;
        background-color: var(--card);

        .y_nvaTab {
            height: 40px;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px 0 10px;

            .y_nvaTab_title {
                font-size: 16px;
                font-weight: bold;
            }
        }

        .chart-box {
            position: relative;
            // height: 100%;
            flex: 1;

            #y_chart {
                height: 100%;
                position: relative;

                div {
                    width: 100% !important;
                }

                :deep(canvas) {
                    width: 100% !important;
                }
            }
        }

    }
}

@media screen and (max-width: 1300px){
    .y__tab {
        display: flex;
        flex-direction: column;
        height: 100%;
        .left {
            width: 100%;
            height: 400px;
            flex: none;
        }
        .center-line {
            width:100%;
            height: var(--space);
        }

        .right {
            height: 400px;
            width: 100%;
            flex: none;
            #y_chart {
                height: 100%;
                width: 100%;
                position: relative;

                div {
                    width: 100% !important;
                }

                :deep(canvas) {
                    width: 100% !important;
                }
            }
        }
    }
}
</style>
